Demo

Components

  • svg-parser

    This component renders any inline SVG string into a target container using a dynamic script.You can globally override common SVG styling properties such as:

    • color
    • fill
    • fillOpacity
    • stroke
    • strokeWidth
    • strokeLinecap
    • strokeLinejoin
    • strokeOpacity
    • svgString
    • id

    Animations are fully supported

    Attributes (settings object)

    Attributes are overwrite the attributes of the input svg string.

    color
    Type: string
    Description: Root-SVG color used for any shapes with `fill="currentColor"` or as a fallback fill if no explicit `fill` is given.
    fill
    Type: string
    Description: Fill color for shapes (e.g. `"none"`, `"black"`, `"currentColor"`). If omitted, original SVG fills are preserved (unless `color` is set, in which case shapes without a fill get `currentColor`).
    fillOpacity
    Type: string
    Description: Opacity of the fill (range: 0 to 1).
    stroke
    Type: string
    Description: Stroke color for shapes (e.g. `"black"`, `"#FF0000"`). If omitted, original SVG strokes are preserved.
    strokeWidth
    Type: string
    Description: Stroke width for shapes (e.g. `"2"`).
    strokeLinecap
    Type: string
    Description: Stroke line cap style: `"butt"`, `"round"`, or `"square"`.
    strokeLinejoin
    Type: string
    Description: Stroke join style: `"miter"`, `"round"`, or `"bevel"`.
    strokeOpacity
    Type: string
    Description: Opacity of the stroke (range: 0 to 1).
    svgString
    Type: string
    Description: The full SVG markup as a string (`<svg>…</svg>`).
    id
    Type: string
    Description: ID of the DOM element into which the processed SVG will be injected.